<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="项目名称" prop="projectName">
				<el-select v-model="queryParams.projectName" placeholder="请选择项目名称" clearable>
					<el-option v-for="dict in dict.type.erecord_item_name_list" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<!-- <el-form-item label="服务种类" prop="serviceType">
				<el-select v-model="queryParams.serviceType" placeholder="请选择服务种类" clearable>
					<el-option v-for="dict in dict.type.erecord_service_type" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="社区" prop="community">
				<el-select v-model="queryParams.community" placeholder="请选择社区" clearable>
					<el-option v-for="dict in dict.type.erecord_community" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item> -->
			<el-form-item label="检查日期">
				<el-date-picker v-model="daterangeCreateDate" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['toiletv2:toiletV2:remove']">删除</el-button>
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['toiletv2:toiletV2:export']">导出明细</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="sanitationVehicleList" @selection-change="handleSelectionChange" @cell-click="cellClick" border>
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="序号" align="center" prop="idx" />
			<el-table-column label="检查日期" align="center" width="100">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.checkDate, '{y}-{m}-{d}') }}</span>
				</template>
			</el-table-column>
			<el-table-column label="车牌号" align="center" prop="licensePlateNo" />
			<el-table-column label="车辆名称" align="center" prop="vehicleName" />
			<el-table-column label="项目名称" align="center" prop="projectName" width="250" />
			<!-- <el-table-column label="社区" align="center" prop="anomalyCount" /> -->
			<el-table-column label="检查人" align="center" prop="checkor" />
			<el-table-column label="登记表" align="center" prop="registerFormImage">
				<template slot-scope="scope">
					<image-preview :src="scope.row.registerFormImage" :width="50" :height="50" />
				</template>
			</el-table-column>
			<el-table-column label="环评类" align="center">
				<el-table-column label="整车漆面 " align="center" prop="vehiclePaintworkStatus" width="50">
					<template slot-scope="scope">
						<TickCross :value="scope.row.vehiclePaintworkStatus" />
					</template>
				</el-table-column>
				<el-table-column label="车牌清晰完整" align="center" prop="licensePlateStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.licensePlateStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="保险杠/安全护杠" align="center" prop="bumperStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.bumperStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="车容干净整洁" align="center" prop="appearanceStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.appearanceStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="垃圾密闭收运" align="center" prop="airtightTransStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.airtightTransStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="装载垃圾桶封闭" align="center" prop="cansClosedStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.cansClosedStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="驾驶员着装与行为规范" align="center" prop="dressBehaviorStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.dressBehaviorStatus" />
						</div>
					</template>
				</el-table-column>
			</el-table-column>
			<el-table-column label="车辆状况检查" align="center">
				<el-table-column label="喇叭、刮水器中控锁" align="center" prop="hornWiperStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.hornWiperStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="转向离合器变速器油门踏板制动" align="center" prop="gasPedalStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.gasPedalStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="机油刹车油变速箱油动力转向油" align="center" prop="lubricantStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.lubricantStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="燃油润滑油冷却液" align="center" prop="coolantStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.coolantStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="散热器水量" align="center" prop="waterVolumeStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.waterVolumeStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="反光板/反光锥" align="center" prop="reflectingBoardStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.reflectingBoardStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="三脚架/雪糕筒" align="center" prop="tripodStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.tripodStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="全车安全警示标识" align="center" prop="safetySignsStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.safetySignsStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="反光镜及盲区后视镜" align="center" prop="reflectingMirrorStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.reflectingMirrorStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="车载灭火器完好、有效" align="center" prop="extinguishersStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.extinguishersStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="轮胎有无开裂或鼓包" align="center" prop="tiresStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.tiresStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="油刹汽刹" align="center" prop="brakeStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.brakeStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="后视镜完好" align="center" prop="rearviewMirrorStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.rearviewMirrorStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="方向盘、仪表盘显示正常" align="center" prop="steeringWheelsStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.steeringWheelsStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="电门踏板、制动踏板正常" align="center" prop="brakePedalStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.brakePedalStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="喇叭、雨刮正常" align="center" prop="hornStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.hornStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="远光灯、近光灯、转向灯正常" align="center" prop="lampStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.lampStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="液压部分升降是否正常" align="center" prop="hydraulicElevatorStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.hydraulicElevatorStatus" />
						</div>
					</template>
				</el-table-column>
			</el-table-column>
			<el-table-column label="运行与证件检查" align="center">
				<el-table-column label="酒精测试结果" align="center" prop="alcoholTestStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.alcoholTestStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="车辆拍照齐全" align="center" prop="licensePlateStatus1" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.licensePlateStatus1" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="驾驶员证件是否有效" align="center" prop="driverLicenseStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.driverLicenseStatus" />
						</div>
					</template>
				</el-table-column>
				<el-table-column label="是否达到出车标准" align="center" prop="tripCriteriaStatus" width="50">
					<template slot-scope="scope">
						<div style="cursor: pointer;">
							<TickCross :value="scope.row.tripCriteriaStatus" />
						</div>
					</template>
				</el-table-column>
			</el-table-column>

			<el-table-column label="环评类-处理前" align="center">
				<el-table-column label="整车漆面" align="center" prop="carPaintworkImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.carPaintworkImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="车牌清晰完整" align="center" prop="licensePlateImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.licensePlateImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="保险杠/安全护杠" align="center" prop="carBumperImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.carBumperImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="车容干净整洁" align="center" prop="vehicleAppearanceImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.vehicleAppearanceImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="垃圾密闭收运" align="center" prop="airtightTransImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.airtightTransImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="装载垃圾桶密闭" align="center" prop="cansClosedImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.cansClosedImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="驾驶员着装与行为规范" align="center" prop="dressBehaviorImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.dressBehaviorImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
			</el-table-column>
			
			<el-table-column label="环评类-处理后" align="center">
				<el-table-column label="整车漆面" align="center" prop="carPaintworkImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.carPaintworkImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="车牌清晰完整" align="center" prop="licensePlateImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.licensePlateImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="保险杠/安全护杠" align="center" prop="carBumperImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.carBumperImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="车容干净整洁" align="center" prop="vehicleAppearanceImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.vehicleAppearanceImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="垃圾密闭收运" align="center" prop="airtightTransImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.airtightTransImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="装载垃圾桶密闭" align="center" prop="cansClosedImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.cansClosedImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="驾驶员着装与行为规范" align="center" prop="dressBehaviorImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.dressBehaviorImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
			</el-table-column>

			<el-table-column label="车辆状况检查-处理前" align="center">
				<el-table-column label="喇叭、刮水器中控锁" align="center" prop="hornWiperImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.hornWiperImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="转向离合器变速器油门踏板制动" align="center" prop="gasPedalImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.gasPedalImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="机油刹车油变速箱油动力转向油" align="center" prop="lubricantImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.lubricantImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="燃油润滑油冷却液" align="center" prop="coolantImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.coolantImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="散热器水量" align="center" prop="waterVolumeImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.waterVolumeImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="反光板/反光锥" align="center" prop="reflectingBoardImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.reflectingBoardImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="三脚架/雪糕筒" align="center" prop="tripodImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.tripodImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="全车安全警示标识" align="center" prop="safetySignsImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.safetySignsImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="反光镜及盲区后视镜" align="center" prop="reflectingMirrorImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.reflectingMirrorImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="车载灭火器完好、有效" align="center" prop="extinguishersImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.extinguishersImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="轮胎有无开裂或鼓包" align="center" prop="tiresImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.tiresImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="油刹汽刹" align="center" prop="brakeImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.brakeImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="后视镜完好" align="center" prop="rearviewMirrorImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.rearviewMirrorImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="方向盘、仪表盘显示正常" align="center" prop="steeringWheelsImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.steeringWheelsImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="电门踏板、制动踏板正常" align="center" prop="brakePedalImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.brakePedalImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="喇叭、雨刮正常" align="center" prop="hornImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.hornImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="远光灯、近光灯、转向灯正常" align="center" prop="lampImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.lampImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="液压部分升降是否正常" align="center" prop="hydraulicElevatorImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.hydraulicElevatorImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
			</el-table-column>

			<el-table-column label="车辆状况检查-处理后" align="center">
				<el-table-column label="喇叭、刮水器中控锁" align="center" prop="hornWiperImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.hornWiperImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="转向离合器变速器油门踏板制动" align="center" prop="gasPedalImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.gasPedalImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="机油刹车油变速箱油动力转向油" align="center" prop="lubricantImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.lubricantImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="燃油润滑油冷却液" align="center" prop="coolantImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.coolantImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="散热器水量" align="center" prop="waterVolumeImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.waterVolumeImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="反光板/反光锥" align="center" prop="reflectingBoardImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.reflectingBoardImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="三脚架/雪糕筒" align="center" prop="tripodImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.tripodImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="全车安全警示标识" align="center" prop="safetySignsImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.safetySignsImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="反光镜及盲区后视镜" align="center" prop="reflectingMirrorImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.reflectingMirrorImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="车载灭火器完好、有效" align="center" prop="extinguishersImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.extinguishersImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="轮胎有无开裂或鼓包" align="center" prop="tiresImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.tiresImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="油刹汽刹" align="center" prop="brakeImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.brakeImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="后视镜完好" align="center" prop="rearviewMirrorImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.rearviewMirrorImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="方向盘、仪表盘显示正常" align="center" prop="steeringWheelsImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.steeringWheelsImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="电门踏板、制动踏板正常" align="center" prop="brakePedalImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.brakePedalImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="喇叭、雨刮正常" align="center" prop="hornImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.hornImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="远光灯、近光灯、转向灯正常" align="center" prop="lampImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.lampImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="液压部分升降是否正常" align="center" prop="hydraulicElevatorImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.hydraulicElevatorImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
			</el-table-column>

			<el-table-column label="运行与证件检查-处理前" align="center">
				<el-table-column label="酒精测试结果" align="center" prop="alcoholTestImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.alcoholTestImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="车辆拍照齐全" align="center" prop="licensePlateImage1Before">
					<template slot-scope="scope">
						<image-preview :src="scope.row.licensePlateImage1Before" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="驾驶员证件是否有效" align="center" prop="driverLicenseImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.driverLicenseImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="是否达到出车标准" align="center" prop="tripCriteriaImageBefore">
					<template slot-scope="scope">
						<image-preview :src="scope.row.tripCriteriaImageBefore" :width="50" :height="50" />
					</template>
				</el-table-column>
			</el-table-column>

			<el-table-column label="运行与证件检查-处理后" align="center">
				<el-table-column label="酒精测试结果" align="center" prop="alcoholTestImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.alcoholTestImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="车辆拍照齐全" align="center" prop="licensePlateImage1After">
					<template slot-scope="scope">
						<image-preview :src="scope.row.licensePlateImage1After" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="驾驶员证件是否有效" align="center" prop="driverLicenseImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.driverLicenseImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
				<el-table-column label="是否达到出车标准" align="center" prop="tripCriteriaImageAfter">
					<template slot-scope="scope">
						<image-preview :src="scope.row.tripCriteriaImageAfter" :width="50" :height="50" />
					</template>
				</el-table-column>
			</el-table-column>


			<el-table-column label="备注" align="center" prop="remark" />
			<el-table-column label="创建人" align="center" prop="createBy" />
			<el-table-column label="创建时间" align="center" prop="createTime" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

		<el-dialog :visible.sync="openBill" width="500px" append-to-body>

			<div>
				<div class="itemCenter">{{ billInfo.licensePlateNo }}</div>
				<div class="item">巡检项：<span style="color:#333;">{{ billInfo.itemText }}</span></div>
				<div class="item">工单编码：<span style="color:#333;">{{ billInfo.flowCode }}</span></div>
				<div class="item">工单状态：<span style="border:dashed #FEE7DA 1px;display:inline-block;height:24px;color:#F99D45;font-size:12px;line-height:22px;padding:0px 10px;">{{
              billState[billInfo.status] }}</span></div>
				<div class="item">工单流程：</div>
				<el-row style="margin-bottom:15px;">
					<el-col :span="2">
						<div class="i-bar" v-if="billFlow['3'].show == false"></div>
						<div class="i-bar-1" v-else></div>
						<div class="i-border-0" v-if="billFlow['2'].show == false || billFlow['3'].show == true"></div>
						<div class="i-border" v-else></div>
						<div class="i-bar" v-if="billFlow['2'].show == false || billFlow['3'].show == true">
							<svg-icon icon-class="clock" style="margin-top:-0.5px;vertical-align: top;padding:0;margin:0;background-color: #fff;color: #44a96c;" />
						</div>
						<div class="i-bar" v-else>
							<svg-icon icon-class="clock" style="margin-top:-0.5px;vertical-align: top;padding:0;margin:0;color:#5E6FED;background-color: #fff;" />
						</div>
						<div class="i-border-0"></div>
						<div class="i-over-0" v-if="billFlow['3'].show == false">
							<i class="el-icon-success" style="margin-top:-0.5px;vertical-align: top;color:#e5e5e5;"></i>
						</div>
						<div class="i-over-1" v-else>
							<i class="el-icon-success" style="margin-top:-0.5px;vertical-align: top;color:#44a96c;"></i>
						</div>
					</el-col>
					<el-col :span="22">
						<div class="item-content">
							<div class="item-title">发现</div>
							<div style="font-weight: 400;">
								<div class="item-user">发现人员:</div>
								<div class="item-user-content">{{ billFlow["1"] ? billFlow["1"].user : "" }}<span v-if="billFlow['1'].user" style="color:#fff;background-color: #F99D45;border-radius:2px;font-size:8px;padding:3px;margin-left:5px;">异常</span>
								</div>
							</div>
							<div class="item-time">{{ billFlow["1"] ? billFlow["1"].time : "" }}</div>
						</div>
						<div class="item-content">
							<div class="item-title">待处理</div>
							<div style="font-weight: 400;">
								<div class="item-user">处理人员:</div>
								<div class="item-user-content">{{ billFlow["2"] ? billFlow["2"].user : "" }}</div>
							</div>
							<div class="item-time">{{ billFlow["2"] ? billFlow["2"].time : "" }}</div>
						</div>
						<div>
							<div class="item-title">完成</div>
							<div style="font-weight: 400;">
								<div class="item-user" style="color:#999;">处理人员:</div>
								<div class="item-user-content">{{ billFlow["3"] ? billFlow["3"].user : "" }}<span v-if="billFlow['3'].user" style="color:#fff;background-color: #44a96c;border-radius:2px;font-size:8px;padding:3px;margin-left:5px;">合格</span>
								</div>
							</div>
							<div class="item-time">{{ billFlow["3"] ? billFlow["3"].time : "" }}</div>
						</div>
					</el-col>
				</el-row>
				<div class="item">图例说明：合格为无色，如果由异常转化为合格则为绿色</div>
				<div class="item">
					<div> 处理前：</div>
					<div style="margin-top:10px;">
						<image-preview :src="billInfo.imageBefore" :width="80" :height="80" />
					</div>
				</div>

				<div class="item">
					<div> 处理后： </div>
					<div style="margin-top:10px;">
						<image-preview :src="billInfo.imageAfter" :width="80" :height="80" />
					</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		listSanitationVehicle,
		listInspectItem,
		delSanitationVehicle,
		listBills
	} from "@/api/standingbook/sanitationVehicle";

	import TickCross from "@/views/components/tickCross";

	export default {
		name: "sanitationVehicle",
		dicts: ['erecord_item_name_list', 'erecord_service_type', 'erecord_community'],
		components: {
			TickCross
		},
		data() {
			return {
				// 按钮loading
				buttonLoading: false,
				// 遮罩层
				loading: true,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 环卫作业车表格数据
				sanitationVehicleList: [],
				// 弹出层标题
				title: "",
				// 是否新增
				isAdd: true,
				// 是否显示弹出层
				open: false,
				// 删除状态时间范围
				daterangeCreateDate: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					projectName: '',//项目名称
					checkDateBegin: '',
					checkDateEnd: '',
					// createDate: undefined,
					// community: undefined,
					// orderByColumn: "checkDate",
					// isAsc: "desc,asc"
				},
				// 表单参数
				form: {},
				// 表单校验
				rules: {},
				openBill: false,
				billInfo: {
					id: undefined,
					status: undefined,
					flowData: undefined,
					imageBefore: undefined,
					imageAfter: undefined
				},
				billFlow: {
					"1": {
						"user": "",
						"time": "",
						"show": false
					},
					"2": {
						"user": "",
						"time": "",
						"show": false
					},
					"3": {
						"user": "",
						"time": "",
						"show": false
					}
				},
				billState: {
					'1': '待处理', //'异常'
					'2': '已处理',
					'3': '完成',
					'4': ' ',
					'99': '待处理'
				}
				//{0=待处理,1=提交,2=处理中 ，3=完成}

			};
		},
		created() {
			this.getList();
			this.listItems();

		},
		methods: {
			cellClick(row, column, cell, event) {
				let attr = column.property;
				if (this.inspectItems.indexOf(attr) != -1) {

					this.title = row.community || ""
					let billQuery = {
						sanitationVehicleId: row.id,
						item: attr
					};
					listBills(billQuery).then(response => {
						this.billInfo = response.data;
						if (this.billInfo.flowData != '') {
							this.openBill = true;
							this.billFlow = JSON.parse(this.billInfo.flowData);
							console.log(this.billFlow)
						} else {
							return;
						}
					})
				}

			},
			/** 查询环卫作业车列表 */
			getList() {
				this.loading = true;
				if (null != this.daterangeCreateDate && '' != this.daterangeCreateDate) {
					this.queryParams["checkDateBegin"] = this.daterangeCreateDate[0];
					this.queryParams["checkDateEnd"] = this.daterangeCreateDate[1];
				} else {
					this.queryParams["checkDateBegin"] = ''
					this.queryParams["checkDateEnd"] = ''
				}
				listSanitationVehicle(this.queryParams).then(response => {
					this.sanitationVehicleList = response.rows.map((item, index) => {
						//前端添加序号
						this.$set(item, 'idx', (this.queryParams.pageNum - 1) * this.queryParams.pageSize + (index + 1))
						return item
					});
					this.total = response.total;
					this.loading = false;
				});
			},
			listItems() {
				listInspectItem().then(response => {
					this.inspectItems = response;
				});
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.reset();
			},
			// 表单重置
			reset() {
				this.form = {
					id: undefined,
					createDate: undefined,
					community: undefined,
					toiletName: undefined,
					toiletCode: undefined,
					abnormalCount: undefined,
					opened: undefined,
					logo: undefined,
					ventilate: undefined,
					handBasin: undefined,
					handry: undefined,
					handSanitizer: undefined,
					waterFaucet: undefined,
					masks: undefined,
					floor: undefined,
					wallspace: undefined,
					ceiling: undefined,
					lights: undefined,
					innerClean: undefined,
					cubicle: undefined,
					cubicleTissue: undefined,
					toilet: undefined,
					roomClean: undefined,
					flushing: undefined,
					grabar: undefined,
					hardware: undefined,
					childHandBasin: undefined,
					barrierfreeFacilities: undefined,
					babyCareRoom: undefined,
					owner: undefined,
					phoneNo: undefined,
					cleanCount: undefined,
					remark: undefined,
					createTime: undefined,
					createBy: undefined,
					updateTime: undefined,
					updateBy: undefined,
					delFlag: undefined
				};
				this.resetForm("form");
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.daterangeCreateDate = [];
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},

			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$modal.confirm('是否确认删除数据项？').then(() => {
					this.loading = true;
					return delSanitationVehicle(ids);
				}).then(() => {
					this.loading = false;
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {}).finally(() => {
					this.loading = false;
				});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('standingbook/sanitationVehicle/export', {
					...this.queryParams
				}, `环卫作业车列表${this.parseTime(new Date(), '{y}{m}{d}')}.xlsx`)
			}
		}
	};
</script>
<style rel="stylesheet/scss" lang="scss">
	.info {
		display: inline-block;
		vertical-align: top;
		margin-left: 10px;
		word-break: break-all;
		width: 200px
	}

	.handCursor {
		cursor: pointer;
	}

	.toiletv2-danger {
		background-color: red;
		color: #fff;
	}

	.toiletv2-success {
		background-color: #418151;
		color: #fff;
	}

	.toiletv2-default {

		color: #fff;
	}

	.el-dialog {
		border-radius: 5px;
		padding-left: 32px;
		padding-right: 32px;

		.el-dialog__header {
			padding: 8px;
		}

		.el-dialog__body {
			padding: 0;
		}
	}

	.item {
		font-weight: bolder;
		font-size: 14px;
		color: #999;
		font-weight: 400;
		margin-bottom: 15px;
	}

	.itemCenter {
		font-weight: bolder;
		font-size: 18px;
		color: #000;
		margin-bottom: 30px;
	}

	.divider-line {
		border: 1px dashed #000;
		height: 1px;
		overflow: hidden;
	}

	.msg-content {
		margin-top: 10px;

		.flow {
			display: inline-block;
			font-weight: bold;
			font-size: 16px;
			margin-top: 5px;
			margin-right: 20px;
			margin-left: 60px;
		}

		.mark {
			box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .2);
			border: solid 1px rgba(0, 0, 0, .2);
			border-radius: 100%;
			color: #fff;
			font-size: 14px;
			padding: 1px;
			width: 28px;
			height: 28px;
			text-align: center;
			display: inline-block;
			vertical-align: top;
			margin-top: 5px;

			.txt {
				background-color: rgba(0, 0, 0, .2);
				border-radius: 100%;
				width: 24px;
				height: 24px;
				line-height: 24px;
			}
		}

		.info {
			display: inline-block;
			vertical-align: top;
			margin-left: 10px;
			word-break: break-all;
			width: 200px
		}

		.status {
			display: inline-block;
			margin-left: 10px;

			.bar {
				color: #fff;
				border-radius: 5px;
				padding: 5px 20px;
			}
		}
	}

	.tag {
		border-left: solid 3px rgba(0, 0, 0, .2);
		margin-left: 124px;
		height: 30px;
		position: relative;
	}

	.tag::after {
		content: '';
		position: absolute;
		width: 0px;
		height: 0px;
		top: 30px;
		bottom: 20px;
		left: -6px;
		border: 5px solid;
		border-color: rgba(0, 0, 0, .4) transparent transparent transparent;
	}

	.el-table .cell {
		padding: 0;
	}

	.el-table--medium .el-table__cell {
		padding: 0;
	}

	.i-bar {
		width: 14px;
		height: 14px;
		border-radius: 14px;
		background-color: #5E6FED;
	}

	.i-bar-1 {
		width: 12px;
		height: 12px;
		border-radius: 12px;
		maring-left: 2px;
		background-color: #44a96c;
	}

	.i-border-0 {
		border-left: solid 4px #44a96c;
		height: 120px;
		margin-left: 4.5px;
	}

	.i-border {
		border-left: solid 4px #5E6FED;
		height: 120px;
		margin-left: 4.5px;
	}

	.i-over-0 {}

	.i-over-1 {
		width: 14px;
		height: 14px;
		border-radius: 14px;
		background-color: #fff;
		text-align: center;
	}

	.item-content {
		height: 134px;
		overflow: hidden;

		.item-title {
			font-size: 14px;
			color: #333;
			font-weight: 700;
		}
	}

	.item-user {
		display: inline-block;
		color: #999;
		width: 60px;
		vertical-align: top;
	}

	.item-user-content {
		display: inline-block;
		color: #333;
		width: calc(100% - 60px);
		vertical-align: top;
	}

	.item-time {
		font-size: 12px;
		color: #999;
	}
</style>